<template>
    <div class = "card-container">
        <MyRadio 
            color = "#707070"
            activeColor = "#DB4723"
            size = "44"
            @change = "handleChange"
        />
        <div class = "icon">
            <img v-if = "host" :src="host + '/images/theacher_1.png'" alt="">
        </div>
        <div class = "desc">
            <h5>咨询师</h5>
            <p>走自己的路，让别人无路可走！</p>
        </div>
    </div>
</template>
<script>
import MyRadio from "../../../components/MyRadio";
import HOST from "../../../config/host";

export default {
    data(){
        return {
            host: HOST
        }
    },
    methods: {
        handleChange(state){
            console.log("当前状态:" + state);
        }
    },
    components: {
        MyRadio
    }
}
</script>
<style lang = "scss" scoped>
    .card-container{
        display: flex;
        align-items: center;
        padding: 30rpx 24rpx;
        .icon{
            padding-left: 20rpx;
            padding-right: 20rpx;
            img{
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
            }
        }
        .desc{
            width: 515rpx;
            h5{
                @include font-color-height(28rpx,#333);
            }
            p{
                @include font-color-height(22rpx,#9A9A9A);
            }
        }
    }
</style>